<template>
	<view class="product-detail">
		<view class="swiper-image">
			<swiper indicator-dots="true" autoplay="true">
				<swiper-item v-for="(img,key) in imgs" :key="key">
					<image :src="img" mode="widthFix" />
				</swiper-item>
			</swiper>
		</view>
		<view class="detail-header">
			<view class="title">
				{{title}}
			</view>
			<view class="detail-header-one">
				<view class="detail-header-one-left">
					<view class="color-one">
						运费: <text class="color-two">{{freight}}</text>
					</view>
					<view class="color-one">
						库存: <text class="color-two">{{stock}}</text>
					</view>
					<view class="color-one">
						限购: <text class="color-two">{{limited}}</text>
					</view>
				</view>
				<view class="detail-header-one-right color-price">
					¥{{price}}
				</view>
			</view>
		</view>
		<view class="mid-background"></view>
		<view class="style-choice">
			<view class="uni-list-cell-navigate uni-navigate-right" style="padding: 22upx 30upx;" @tap="onShowDrawerVisible('款式选择')">
				款式选择:
			</view>
		</view>
		<view class="mid-background"></view>

		<!-- 分段器 -->
		<view class="segmented-control">
			<view v-for="(item, index) in items" class="segmented-control-item" :key="index" @click="onClick(index)" :style="index === currentItem ? 'border-left:0;border-bottom: 1px solid red' : '' ">
				<text>{{item}}</text>
			</view>
		</view>

		<view class="item-content">
			<view v-show="currentItem === 0">
				<image style="width: 100%;" src="../../static/img/product/u328.jpg" mode="widthFix"></image>
				<view class="content-text">
					<text>【出品】：亦喜工作室\n</text>
					<text>【器名】：「鹿语」黄铜印章\n</text>
					<text>【器用】：名章/闲章/藏书章\n</text>
					<text>【尺寸】：注 - 手工器物，尺寸略有差异\n</text>
					<text> - 整体：15mm*15mm*27mm(长*宽*高)\n</text>
					<text> - 印面：约15mm*15mm\n</text>
					<text>【工艺】：古法铸造，手工打磨、做旧。\n</text>
					<text>【定制】：支持1-4字个性定制，手刻、机刻两种方式可选。\n</text>
				</view>
				<image style="width: 100%;" src="../../static/img/product/u330.jpg" mode="widthFix"></image>

				<view class="" style="width: 100%;text-align: center;">
					<text style="color: #F24439;"># 春日絮语 #</text>
				</view>
				<view class="content-text">
					<text>金石不言自有声。\n</text>
					<text>是以，我们给这枚安静的小鹿印章取名「鹿语」。\n</text>
					<text>在「鹿语」推出之时，我们最想说的是一声感谢。\n</text>
					<text>感谢朋友们再三敦促，让我们积攒起动力，推出此单品。\n</text>
					<text>也感谢朋友们耐心等待，你们在屏幕另一端敲下的文字，字字句句都是暖心的鼓励。\n</text>
				</view>
				<image style="width: 100%;" src="../../static/img/product/u333.jpg" mode="widthFix"></image>
				<view class="content-text">
					<text>去年的12月18日，我们推出「月麓」印章镇纸。这枚小鹿印章，即是「月麓」的重要组成之一。\n</text>
					<text>66天后的2月21日，500件「月麓」，连同500枚私人定制的小鹿印章，全部售罄。\n</text>
				</view>
				<image style="width: 100%;" src="../../static/img/product/u335.jpg" mode="widthFix"></image>
				<image style="width: 100%;" src="../../static/img/product/u336.jpg" mode="widthFix"></image>
				<!-- <image style="width: 100%;" src="../../static/img/product/u335.jpg" mode="widthFix"></image> -->
			</view>
			<view v-show="currentItem === 1">
				<view class="seg-comment-control">

					<view v-for="(item, index) in commentItems" :key="index" @click="onClickCommentIndex(index)" :style="index === commentIndex ? 'background-color:red;color:#fff;' : 'color:#666' ">
						<text>{{item}}</text>
					</view>
				</view>
				<!-- <view v-show="commentIndex === 0"> -->
				<view>
					<view class="commentContent" v-for="(item,index) in commentContents" :key="index">
						<view class="commentContent-top">
							<image :src="item.iconURL" mode="widthFix"></image>
							<view class="">
								<text style="color:#b3b3b3;">{{item.nickName}}</text>
								<text style="color:#e7e7e7;">{{item.date}}</text>
							</view>
						</view>
						<text>{{item.content}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<view class="footer-left">
				<view class="">
					<image src="../../static/img/product/icon-dadianhua.png" mode="widthFix"></image>
					<text>客服</text>
				</view>
				<view class="">
					<image src="../../static/img/product/icon-gouwuche.png" mode="widthFix"></image>
					<text>购物车</text>
				</view>
			</view>
			<view class="footer-right">
				<view class="footer-right-l grep-btn" @tap="onShowDrawerVisible('加入购物车')">
					<text>加入购物车</text>
				</view>
				<view class="footer-right-r red-btn" @tap="onShowDrawerVisible('立即购买')">
					<text>立即购买</text>
				</view>
			</view>
		</view>

		<view style="height: 100upx;"></view>

		<shopping-cart :visible="buttomDrawerVisible" mode="right" @close="closeButtomDrawer">
			<view class="shopping-cart">
				<view class="selectData">
					<image :src="selectData.iconURL" mode="widthFix"></image>
					<view class="selectData-left">
						<view class="selectData-title">
							{{selectData.title}}
						</view>
						<view class="selectData-price">
							¥{{selectData.price}}
						</view>
					</view>
				</view>
				<view class="style">
					<view class="style-desc">
						{{selectData.style}}:
					</view>
					<view class="style-list">
						<view class="style-item" v-for="(item,index) in selectData.styleItem" :key="index" @tap="onClickStyle(index)"
						:style="styleSelectIndex === index? 'background-color:rgba(242, 68, 57, 1);color:#FFF;':''">
							{{item}}
						</view>
					</view>
				</view>
				<view class="style-desc uni-input-row">
					<label>购买数量:</label>
					<uni-number-box :min="0" :max="9"></uni-number-box>
				</view>
				<view class="shop-car-btn">
					<view v-if="selectDataBtn === '款式选择'" class="grep-btn">
						加入购物车
					</view>
					<view v-if="selectDataBtn === '款式选择'" class="red-btn" @tap="toOrderConfirm">
						立即购买
					</view>
					<view v-if="selectDataBtn === '加入购物车'" class="red-btn">
						加入购物车
					</view>
					<view v-if="selectDataBtn === '立即购买'" class="red-btn" @tap="toOrderConfirm">
						下一步
					</view>
				</view>
				<view class="shopping-cart-close uni-icon uni-icon-closeempty" @tap="closeButtomDrawer()">
				</view>
			</view>
		</shopping-cart>
		
		<share-popup :visible="showShare" @close="closeShare"></share-popup>

	</view>
</template>

<script>
	import uniSegmentedControl from 'components/uni-segmented-control.vue';
	// import uniDrawer from 'components/uni-drawer.vue';
	import shoppingCart from "components/shopping-cart.vue"
	import uniNumberBox from "components/uni-number-box.vue"
	import sharePopup from "components/share-popup.vue"
	export default {
		components: {
			uniSegmentedControl,
			// uniDrawer,
			shoppingCart,
			uniNumberBox,
			sharePopup
		},
		onLoad(e){
			console.log(e)
		},
		data() {
			return {
				imgs: [
					"../../static/img/index1/u131.jpg",
					"../../static/img/index1/u130.jpg",
					"../../static/img/index1/u129.jpg",
					"../../static/img/index1/u128.jpg"
				],
				title: "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造 ",
				freight: "到付",
				stock: 354,
				limited: "1件",
				price: 1280,
				items: [
					"商品详情",
					"用户评价"
				],
				currentItem: 0,
				commentIndex: 0,
				commentItems: [
					"全部",
					"好评(2)",
					"中评(0)",
					"差评(0)"
				],
				commentContents: [
					{
						iconURL: "../../static/img/index1/u90.png",
						nickName: "黎**憨",
						date: "2018-07-23 00:03:11",
						content: "好评"
					},
					{
						iconURL: "../../static/img/index1/u115.jpg",
						nickName: "苔**枝",
						date: "2018-06-13 07:56:36",
						content: "非常棒"
					},
					{
						iconURL: "../../static/img/index1/u90.png",
						nickName: "黎**憨",
						date: "2018-07-23 00:03:11",
						content: "好评"
					},
					{
						iconURL: "../../static/img/index1/u115.jpg",
						nickName: "苔**枝",
						date: "2018-06-13 07:56:36",
						content: "非常棒"
					}
				],
				buttomDrawerVisible: false,
				showDrawerModel: "款式选择",
				selectData: {
					iconURL: "../../static/img/index1/u131.jpg",
					title: "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造 ",
					price: 1280,
					style: "款式选择",
					styleItem: [
						"小篆",
						"大篆",
						"简隶",
						"繁隶",
						"竹简",
						"刻本"
					],
				},
				selectDataBtn: "款式选择",
				styleSelectIndex:0,
				showShare:false
			}
		},
		computed: {},
		methods: {
			onClick(index) {
				// console.log(123)
				if (this.currentItem !== index) {
					this.currentItem = index;
				}
			},
			onClickCommentIndex(index) {
				if (this.commentIndex !== index) {
					this.commentIndex = index;

				}
			},
			onShowDrawerVisible(model) {
				this.buttomDrawerVisible = true;
				this.showDrawerModel = model;
				// console.log(model);
				this.selectDataBtn = model;
			},
			closeButtomDrawer() {
				this.buttomDrawerVisible = false;
			},
			onClickStyle(index){
				this.styleSelectIndex = index;
			},
			closeShare(){
				this.showShare = false;
				// console.log(showShare);
			},
			toOrderConfirm(){
				uni.navigateTo({
					url:"/pages/order/order-confirm"
				})
			}
		},
		onNavigationBarButtonTap(e) {
// 			uni.showToast({
// 				title: e.index === 0 ? "你点了分享按钮:" + e.index : "你点了收藏按钮:" + e.index,
// 				icon: "none"
// 			})
			
			if (e.index === 0) {
				this.showShare = true;
			}
		},
	}
</script>

<style lang="scss">
	.product-detail {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
	}

	.product-detail {

		.swiper-image image,
		swiper {
			width: 750upx;
			height: 750upx;
		}

		.title {
			margin-top: 10upx;
			font-weight: 400;
			font-style: normal;
			font-size: 28upx;
			color: #666666;
		}

		.detail-header {
			padding: 0upx 20upx;
		}

		.detail-header-one {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.detail-header-one-left {
			display: flex;
			flex-direction: row;
		}

		.detail-header-one-left view {
			margin-right: 15upx;
		}

		.detail-header-one-left text {
			margin-left: 10upx;
		}

		.color-one {
			color: #D7D7D7;
		}

		.color-two {
			color: #1E3E30;
		}

		.color-price {
			color: #F24439;
		}

		.mid-background {
			background-color: rgba(242, 242, 242, 1);
			height: 20upx;
		}

		.style-choice {
			// height: 10upx;
			color: #666666;
		}

		.segmented-control {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			font-size: 28upx;
			border-radius: 10upx;
			box-sizing: border-box;
			margin: 0 auto;
			overflow: hidden;
		}

		.segmented-control view {
			padding: 25upx;
		}

		//----
		.content-text {
			color: #666666;
			line-height: 20px;
			padding: 10upx;
		}

		//评论
		.seg-comment-control {
			background-color: rgba(242, 242, 242, 1);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20upx 40upx;
		}

		.seg-comment-control view {
			padding: 1upx 30upx;
			border-radius: 5px;
			font-size: 13px;
		}

		.commentContent {
			border-bottom: 1px solid #e2e2e2;
			padding: 30upx;
		}

		.commentContent-top {
			display: flex;
			flex-direction: row;
			margin-bottom: 10upx;
		}

		.commentContent-top view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			// border: 1px solid red;
			margin-left: 20upx;
			width: 100%;
		}

		.commentContent-top image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}

		//--footer
		.footer {
			position: fixed;
			z-index: 2;
			bottom: 0%;
			box-shadow: 0px -2px 5px rgba(94, 94, 94, 0.3);
			background-color: white;
			width: 100%;
			box-sizing: border-box;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 100upx;
		}

		.footer-left {
			color: #666666;
			width: 35%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// border: 1px solid black;
		}

		.footer-left view {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			border-left: 1px solid #e2e2e2;
			width: 100%;
			padding: 10upx 10upx;
		}

		.footer-left text {
			padding-top: 2upx;
			font-size: 13px;
		}

		.footer-left image {
			width: 35upx;
		}

		.footer-right {
			color: #FFFFFF;
			width: 65%;
			display: flex;
			flex-direction: row;
			// justify-content: space-around;
			// align-items: center;
		}

		.footer-right-l {
			width: 50%;
			// border: 1px solid black;
			display: flex;
			justify-content: center;
			align-items: Center;
		}

		.footer-right-r {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.grep-btn {
			background-color: rgba(94, 94, 94, 1);
		}

		.red-btn {
			background-color: rgba(242, 68, 57, 1);
		}

		//----------selectData
		
		.shopping-cart {
			position: relative;
		}
		
		.shopping-cart-close {
			position: fixed;
			top:1%;
			right: 1%;
			border-radius: 50%;
			font-weight: bold;
			font-size: 20px;
			color: #999999;
		}
		
		.selectData {
			border-buttom: 1px solid #333333;
			display: flex;
			flex-direction: row;
			padding: 20upx;
		}

		.selectData image {
			width: 126upx;
			height: 126upx;
		}

		.selectData-left {
			display: flex;
			flex-direction: column;
			margin-left: 20upx;
		}

		.selectData-title {
			width: 80%;
			font-size: 14px;
			color: #666666;
			height: 60%;
			line-height: 34upx;
			// border: 1px solid red;
		}

		.selectData-price {
			height: 20%;
			// border: 1px solid red;
			text-align: right;
			font-weight: 400;
			font-style: normal;
			color: #F24439;
		}
		
		.style {
			border-buttom: 1px solid #333333;
		}

		.style-desc {
			padding-left: 20upx;
			color: #666666;
		}
		
		.style-desc uni-number-box {
			height: 30upx;
		}

		.style-list {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			padding: 20upx;
			flex-wrap: wrap;
		}

		.style-item {
			width: 20%;
			border: 1px solid rgba(153, 153, 153, 1);
			color: #999999;
			border-radius: 2px;
			margin: 10upx;
			// padding: 10upx;
			text-align: center;
		}

		.shop-car-btn {
			position: fixed;
			display: flex;
			flex-direction: row;
			width: 100%;
			bottom: 0%;
			height: 100upx;
			// align-items: center;
			justify-content: space-around;
			color: #FFFFFF;
		}

		.shop-car-btn view {
			// height: 100upx;
			width: 100%;
			text-align: center;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			font-size: 13px;
		}
	}
</style>
